<template>
  <div class="parentCommentItem">
    <div class="header">
      <div class="info">
        <div class="name">{{ parentdata.user.nickname }}</div>
        <div class="time">2小时前</div>
      </div>
      <div class="reply" @click="clickReply">回复</div>
    </div>
    <!-- 递归父评论 -->
    <parent :parentdata="parentdata.parent" v-if="parentdata.parent" />
    <div class="content">{{ parentdata.content }}</div>
  </div>
</template>

<script>
import eventBus from "../../utils/eventBus";
export default {
  props: ["parentdata"],
  name: "parent",
  methods: {
    clickReply() {
      eventBus.$emit("replyComment", this.parentdata.id);
      console.log(222);
    },
  },
};
</script>

<style lang="less" scoped>
.parentCommentItem {
  border: 1px solid #e4e4e4;
  padding: 4/360 * 100vw;
  .header {
    display: flex;
    .info {
      flex: 1;
      .time {
        font-size: 14/360 * 100vw;
        color: #888;
        margin: 4px 0;
      }
    }
    .reply {
      color: #999;
      font-size: 14/360 * 100vw;
    }
  }
  .content {
    color: rgb(109, 59, 50);
  }
}
</style>